import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';
import {useRef,useState,useEffect} from 'react';
// 11:12
// IP定位
function SMap() {
  // 地图引用
   const mapRef = useRef();
  //  点坐标
  const [point,setPoint] = useState({lng: 116.402544, lat: 39.928216})
  const [address,setAddress] = useState({})
   useEffect(()=>{
    function myFun(result){
      var cityName = result.name;
      mapRef.current.map.setCenter(cityName);
      alert("当前定位城市:" + cityName);
  }
  var myCity = new window.BMapGL.LocalCity();
  myCity.get(myFun); 
   },[])
 const clickHd = e=>{
  // 更新点的位置
  setPoint({...e.latlng})
  // 创建一个位置解析器
  var geoc = new window.BMapGL.Geocoder();
  // 根据位置显示地理信息
  geoc.getLocation(e.latlng, function(rs){
    setAddress( rs.addressComponents);
})
 }
  return ( <div>
    地图
    <Map 
    ref={mapRef}
    onClick={clickHd}
    enableScrollWheelZoom={true}
    center={point} zoom="13">
            <Marker position={point} />
            <NavigationControl /> 
            {/* <InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/> */}
        </Map>
        <p>
          当前选中的位置：{JSON.stringify(point)}
        </p>
        <p>解析位置：{JSON.stringify(address)}</p>
  </div> );
}

export default SMap;